<template>
    <div class="bigbox">
        <div class="table">
            <el-table :data="data.employeeTable" stripe style="width: 100%;" max-height="1000"
                :header-cell-style="{ backgroundColor: 'aliceblue', color: 'pink' }">
                <el-table-column fixed prop="id" label="ID" width="100" />
                <el-table-column prop="role" label="角色" width="120" />
                <el-table-column prop="avatar" label="头像" width="120">
                    <template #default="scope">
                        <img :src="scope.row.avatar" class="avatar-img" alt="头像" />
                    </template>
                </el-table-column>
                <el-table-column prop="uname" label="账号" width="150" />
                <el-table-column prop="nickName" label="姓名" width="150" />
                <el-table-column prop="sword" label="斩魄刀" width="130" />
                <el-table-column prop="sex" label="性别" width="90" />
                <el-table-column prop="address" label="住址" width="220" show-overflow-tooltip />
                <el-table-column prop="email" label="邮箱" width="230" />
                <el-table-column prop="detail" label="个人介绍" width="320" show-overflow-tooltip />
                <el-table-column fixed="right" label="操作" width="130">
                    <template #default>
                        <el-button link type="primary" size="small">编辑</el-button>
                        <el-button link type="primary" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, reactive } from 'vue';

const data = reactive({
    employeeTable: []
})

//获取所有员工
function getAllEmployee() {
    axios.get('/api/getAllEmployee').then(res => {
        data.employeeTable = res.data.data
        console.log(data.employeeTable);
    })
}

onMounted(() => {
    getAllEmployee()

})

</script>

<style scoped>
.bigbox {
    flex: 1;
    /* display: flex; */
    width: 100%;
}

.table {
    flex: 1;
    background-color: azure;
}

/* 表格中的头像 */
.avatar-img {
  width: 50px; /* 设置头像宽度 */
  height: 50px; /* 设置头像高度 */
  border-radius: 50%; /* 设置为圆形 */
  object-fit: cover; /* 确保图片填充整个区域 */
}
</style>